<template>
  <div class="header">
    <el-row>
      <el-col :span="5">
        <h4 class="title">WowSurprice后台管理系统</h4>
      </el-col>
      <el-col :span="5" :offset="14">
        <div class="logout">
          <el-dropdown trigger="click">
            <el-button type="primary" icon="el-icon-setting">
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit-outline">修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button" @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data() {
      return {
        
      }
    },
    methods: {
      logout() {
        this.$confirm('确认退出登录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this._logout()
        })
      },
      async _logout() {
        let { data: { code } } = await this.$axios({
          url: this.$api + '/v1/dlog/logout',
          method: 'POST'
        })
        if (code === 0) {
          localStorage.removeItem('token')
          this.$router.replace('/login')
        }
      }
    }
  }
</script>

<style lang="scss">
  .header {
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 4px 0 #eee;
    items-align: center;
    .title {
      text-align: center;
    }
    .logout {
      text-align: right;
      padding:12px;
    }
  }
</style>
